<template>
  <div class="add_hospital_page">

    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="add_form" size="small" :label-width="labelWidth">
        <el-form-item label="问题内容：" prop="question">
          <el-input v-model.trim="addForm.question"></el-input>
        </el-form-item>
        <el-form-item label="关联项目：" prop="linkProjectId">
          <project-select v-model="addForm.linkProjectId" :multiple="false"></project-select>
        </el-form-item>
        <el-form-item label="话题：" prop="topic">
          <el-input v-model.trim="addForm.topic"></el-input>
        </el-form-item>
        <el-form-item label="提问时间：" prop="questionTime">
          <!-- <el-input v-model="addForm.questionTime"></el-input> -->
          <el-date-picker v-model="addForm.questionTime" type="datetime" :picker-options="pickOptions" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" :default-value="defaultValue" :default-time="defaultTime" @change="changeTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="提问人：" prop="questionPerson">
          <el-input v-model.trim="addForm.questionPerson"></el-input>
        </el-form-item>
        <el-form-item></el-form-item>
        <el-form-item label="问题简介：" prop="introduce" class="long_form_item">
          <el-input type="textarea" v-model.trim="addForm.introduce" resize="none" rows="4"></el-input>
        </el-form-item>
        <!-- <el-form-item></el-form-item> -->

        <el-form-item label="答题人1：" prop="answerPerson1">
          <el-input v-model.trim="addForm.answerPerson1"></el-input>
        </el-form-item>
        <el-form-item label="答题时间1：" prop="answerTime1">
          <!-- <el-input v-model="addForm.answerTime1"></el-input> -->
          <el-date-picker v-model="addForm.answerTime1" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="answerOptions" :default-value="askDefaultValue" :default-time="askDefaultTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="答题内容1：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.answerContent1" rows="5" resize="none"></el-input> -->
          <WangEditor v-model="addForm.answerContent1"></WangEditor>
        </el-form-item>

        <el-form-item label="答题人2：">
          <el-input v-model.trim="addForm.answerPerson2"></el-input>
        </el-form-item>
        <el-form-item label="答题时间2：">
          <!-- <el-input v-model="addForm.answerTime2"></el-input> -->
          <el-date-picker v-model="addForm.answerTime2" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="answerOptions" :default-value="askTwoDefaultValue" :default-time="askTwoDefaultTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="答题内容2：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.answerContent2" rows="5" resize="none"></el-input> -->
          <WangEditor v-model="addForm.answerContent2"></WangEditor>
        </el-form-item>

        <el-form-item label="答题人3：">
          <el-input v-model.trim="addForm.answerPerson3"></el-input>
        </el-form-item>
        <el-form-item label="答题时间3：">
          <!-- <el-input v-model="addForm.answerTime3"></el-input> -->
          <el-date-picker v-model="addForm.answerTime3" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="answerOptions" :default-value="askThreeDefaultValue" :default-time="askThreeDefaultTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="答题内容3：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.answerContent3" rows="5" resize="none"></el-input> -->
          <WangEditor v-model="addForm.answerContent3"></WangEditor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 基础信息 end -->

    <!-- 平台运营 开始 -->
    <div class="content" v-show="step == 2">
      <el-form :model="addForm" ref="secondForm" :rules="secondFormRules" size="small" :label-width="labelWidth">
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否首页：" class="" prop="homePageShow">
          <el-radio-group v-model="addForm.homePageShow">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="初始阅读数：" class="" prop="initReadCnt">
          <el-input v-model="addForm.initReadCnt" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input type="textarea" v-model="addForm.seoKeywords" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input type="textarea" v-model="addForm.seoDescription" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 平台运营 end -->

  </div>
</template>
<script>
import ImageUpload from "@/components/upload/index.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import {
  BASEURL,
  ADD_QUESTIONANSWER_INFO,
  EDIT_QUESTIONANSWER_INFO,
  GET_QUESTIONANSWER_INFO,
} from "@/http/information";
import { deepClone, showToast } from "@/common/util";
import moment from "moment";
export default {
  components: {
    ImageUpload,
    WangEditor,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "平台运营", id: 2 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      addFormRules: {
        question: [
          { required: true, message: "请输入问题内容", trigger: "blur" },
        ],
        introduce:[ { required: true, message: "请输入问题简介", trigger: "blur" }],
        answerPerson1:[ { required: true, message: "请输入答题人1", trigger: "blur" }],
        answerTime1:[ { required: true, message: "请输入答题时间1", trigger: "blur" }],
        linkProjectId: [
          { required: true, message: "请选择关联项目", trigger: "change" },
        ],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [
          { required: true, message: "请选择是否首页", trigger: "change" },
        ],
        initReadCnt: [
          { required: true, message: "请输入初始阅读数", trigger: "blur" },
        ],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      loading: false,
      defaultTime: "",
      defaultValue: "",
      askDefaultTime: "",
      askDefaultValue: "",
      askTwoDefaultTime: '',
      askTwoDefaultValue: '',
      askThreeDefaultTime: '',
      askThreeDefaultValue: '',
      // pickOptions: {
      //   disabledDate: function (date) {
      //     let _now = new Date().getTime();
      //     let _time = new Date(date).getTime();
      //     if (_time > _now) {
      //       return true;
      //     } else {
      //       return false;
      //     }
      //   },
      // },
    };
  },
  computed: {
    answerOptions() {
      let _this = this;
      return {
        disabledDate: function (date) {
          let askTime = _this.addForm.questionTime;
          let _now = new Date().getTime();
          let _time = new Date(date).getTime();
          let askTimes = new Date(askTime).getTime();

          // 小于提问时间，禁止选择
          if (askTimes && _time < askTimes) {
            return true;
          }

          if (_time > _now) {
            return true;
          }

          return false;

          // if (askTimes && _time > askTimes) {
          //   return false;
          // }

          // if (_time > _now) {
          //   return true;
          // }

          // return true;
        },
      };
    },
    pickOptions(){
      let _this = this;
      return {
        disabledDate: function (date) {
          let askTime = _this.addForm.answerTime1;
          let _now = new Date().getTime();
          let _time = new Date(date).getTime();
          let askTimes = new Date(askTime).getTime();

          // 提问时间必须小于答题时间
          if(_time > askTimes){
            return true;
          }
          if (_time > _now) {
            return true;
          } else {
            return false;
          }
        }
      }
    }
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
    //this.$set(this.addForm,'questionTime',moment().format('yyyy-MM-dd HH:mm:ss'))
    this.initDate()
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      //this.nextStep(row.id)
      if (this.step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.step = row.id;
        });
        return false;
      }
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 下一步
    nextStep() {
      let _this = this;
      if (_this.step == 1) {
        _this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = 2;
        });
        return false;
      }
      _this.step += 1;
    },

    // 获取详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_QUESTIONANSWER_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 图片
        if (obj.casePictures && obj.casePictures.length) {
          let arr = [];
          obj.casePictures.map((k) => {
            arr.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.casePictures = arr;
        }
        delete obj.relQuestions;
        this.addForm = obj;
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 案例图片
      if (o.casePictures && o.casePictures.length) {
        let arr = [];
        o.casePictures.map((k) => {
          arr.push(k.path);
        });
        o.casePictures = arr;
      }
      
      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          EDIT_QUESTIONANSWER_INFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }

        // 新增
        ADD_QUESTIONANSWER_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 监听提问时间
    changeTime(e) {
      console.log(e);
      this.askDefaultValue = e;
      this.askDefaultTime = moment(e).format("HH:mm:ss");
    },

    // 初始化时间
    initDate() {
      let _times = moment().format('x');
      let m = 130 * 60 * 1000;
      let n = 80 * 60 * 1000;
      let b = 40 * 60 * 1000;

      this.defaultTime = moment(_times - m).format("HH:mm:ss");
      this.defaultValue = moment(_times - m);

      this.askDefaultTime = moment(_times - n).format("HH:mm:ss");
      this.askDefaultValue = moment(_times - n);

      this.askTwoDefaultTime = moment(_times - b).format("HH:mm:ss");
      this.askTwoDefaultValue = moment(_times - b);

      this.askThreeDefaultTime = moment().format("HH:mm:ss")
      this.askThreeDefaultValue = moment()
    }

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>